<!-- 活动秒杀 -->
<template>
  <div class="flash_box">
    <Search title="活动名称:" placeholder="活动名称" @search="searchFn"></Search>
    <TableHeader>
      <template #default>
        <el-button class="button" type="primary" @click="initPage">初始当前列表</el-button>
      </template>
    </TableHeader>
    <!-- 表单 -->
    <div class="table">
      <el-table :data="flashList.tableData" border width="100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="title" label="活动标题" />
        <el-table-column prop="startDate" label="活动状态" />
        <el-table-column label="开始时间">
          <template #default="scope">
            {{ handleDate(scope.row.startDate) }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间">
          <template #default="scope">
            {{ handleDate(scope.row.endDate) }}
          </template>
        </el-table-column>
        <!-- 上线下按钮 -->
        <el-table-column label="上线/下线">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
              :inactive-value="0" @change="changeStatus(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="157px">
          <template #default="scope">
            <el-button type="primary" size="small" text>设置商品</el-button>
            <el-button type="primary" size="small" text @click="editFn">编辑</el-button>
            <el-button type="danger" size="small" text @click="delFn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination v-model:currentPage="searchFlashParmas.pageNum" v-model:page-size="searchFlashParmas.pageSize"
        :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
        :total="flashList.total" @size-change="handleSizeChange" @current-change="currentchangeFn">
        <template #total>
          <div>11</div>
        </template>
      </el-pagination>
    </div>
  </div>
  <!-- 编辑框 -->
  <div class="edit">
    <el-dialog v-model="editFlag" title="修改信息">
      <el-form label-width="120px">
        <el-form-item label="活动标题：">
          <el-input />
        </el-form-item>
        <el-form-item label="开始时间:">
          <el-date-picker v-model="startTime" type="date" placeholder="Pick a day" />
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-date-picker v-model="endTime" type="date" placeholder="Pick a day" />
        </el-form-item>
        <el-form-item label="上线/下线：">
          <el-radio-group>
            <el-radio :label="1"> 是</el-radio>
            <el-radio :label="0">否 </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editFlag = false" size="large">取消</el-button>
        <el-button type="primary" @click="openEdit" size="large">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, Ref } from "vue";
import Search from "../../components/search.vue"
import TableHeader from "../../components/tableHeader.vue"
import { flashListApi, flashUpdateStatusApi,flashDeleteApi } from "../../request/smsApi"
import { handleDate } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";
interface IflashList {
  tableData: {}[];
  total: number;
}
const flashList = reactive<IflashList>({
  tableData: [],
  total: 0,
})
// 搜索关键字
const newSearch = ref("");
// 请求列表参数
const searchFlashParmas = reactive({
  keyword: newSearch.value,
  pageNum: 1,
  pageSize: 10
})
// 请求秒杀活动列表
const getFlashList = () => {
  flashListApi(searchFlashParmas).then(res => {
    console.log(res);
    flashList.tableData = res.data.list
    flashList.total = res.data.total
  })
}
// 重置初始化列表
function initPage() {
  newSearch.value = '';
  searchFlashParmas.keyword = "";
  searchFlashParmas.pageNum = 1;
  searchFlashParmas.pageSize = 10;
  getFlashList()
}
initPage();

// 分页数据条数
function handleSizeChange(size: number) {
  searchFlashParmas.pageSize = size;
  getFlashList()
}
// 分页
function currentchangeFn() {
  getFlashList()
}
// 搜索
function searchFn(searchContent: Ref<string>) {
  // 存储一下搜索字
  newSearch.value = searchContent.value;
  searchFlashParmas.keyword = searchContent.value
  searchFlashParmas.pageNum = 1
  getFlashList()
}

// 更改上下线状态
async function changeStatus(row: any) {
  // console.log(row);
  const res = await flashUpdateStatusApi(row.id, row.status);
  // console.log(res);
  if (res.code === 200) {
    ElMessage({
      message: res.message,
      type: "success",
    });
  }
}
// 删除活动
function delFn(row:any){
  ElMessageBox.confirm("是否要删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      console.log(row);
      await flashDeleteApi(row.id);
      initPage()
    })
    .catch(() => { });
  
}






// 编辑用户信息弹窗状态
let editFlag = ref(false);
const editFn = async (userInfo: IUserListDataItem) => {
  editFlag.value = true;
};
// 再次打开修改用户信息确认窗口
const openEdit = () => {
  ElMessageBox.confirm("此操作将修改活动信息 , 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  })
    .then(async () => {
      console.log("点击确定的操作,修改列表请求");
    })
    .catch(() => { });
};
const startTime = ref('')
const endTime = ref('')



</script>
<style lang="scss" scoped>
.flash_box {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  box-sizing: border-box;
  width: 100%;
}

.table {
  :deep(.el-button) {
    padding: 10px 0;
  }
}

.page {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}
</style>
